<template>
    <div>
        <h2>显示会员管理</h2>
        <span>姓名</span>
        <input type="text" v-model="state.name">
        <input type="button" value="查询" @click="getMember">
        -----<input type="button" value="导出" @click="daoout">
        <table class="table table-bordered">
            <thead>
                <tr>
                <td><input type="checkbox" v-model="state.checkall" @click="checkall"></td>
                <td>会员真实姓名</td>
                <td>手机号</td>
                <td>身份证号</td>
                <td>会员图片</td>
                <td>会员积分</td>
                <td>余额</td>
                <td>创建时间</td>
                <td>修改时间</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
                <tr v-for="item in list">
                <td><input type="checkbox" v-model="state.checkall" @click="checkall"></td>
                <td>{{ item.MemberName }}</td>
                <td>{{ item.MemberPhone }}</td>
                <td>{{ item.Card }}</td>
                <td><img :src="'https://localhost:7272'+item.MemberPhoto" alt="" width="70" height="70"></td>
                <td>{{ item.Intergral }}</td>
                <td>{{ item.Money }}</td>
                <td>{{moment(item.CreateTime).format('YYYY-MM-DD HH:mm:ss')}}</td>
                <td>{{moment(item.UpdTime).format('YYYY-MM-DD HH:mm:ss') }}</td>
                <td>
                    <input type="button" value="删除" @click="del(item.Id)" >
                    <input type="button" value="编辑" @click="upd(item.Id)">
                    <input type="button" value="修改积分" @click="updintergral(item.Id)">
                    <input type="button" value="充值" @click="chat(item.Id)">
                    <input type="button" value="详情" @click="detail(item.Id)">
                </td>
            </tr>
            </tbody>
        </table>
        当前页:{{ state.pageindex }}
        每页显示:{{ state.pagesize }}
        总条数:{{ totalcount }}
        总页数:{{ totalpage }}
        <input type="button" value="首页" @click="gpage('a')">
        <input type="button" value="上一页" @click="gpage('b')">
        <input type="button" value="下一页" @click="gpage('c')">
        <input type="button" value="尾页" @click="gpage('d')">
        <select @change="changsize" v-model="state.pagesize">
            <option value="2">==2==</option>
            <option value="4">==4==</option>
            <option value="6">==6==</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { reactive,toRefs,onMounted } from 'vue';
import { useRouter,useRoute } from 'vue-router';
const router= useRouter()
const route=useRoute()
import moment from 'moment';

const data:any=reactive({
    state:{
        name:'',
        pageindex:1,
        pagesize:2
    },
    src:'',
    list:[],
    totalcount:0,
    totalpage:0
})

const {state,src,list,totalcount,totalpage}=toRefs(data)
//类似就绪函数
onMounted(()=>{
    getMember();
})
//分页
const gpage=(str:any)=>{
    switch(str)
    {
        case 'a':
            state.value.pageindex=1;
            console.log('首页');
            break;
        case 'b':
            if(state.value.pageindex>totalpage.value)
            {
                alert('开始翻页');
                return;
            }
            state.value.pageindex--;
            console.log('上一页');
            break;
        case 'c':
        if(state.value.pageindex==totalpage.value)
            {
                alert('翻页');
                return;
            }
            state.value.pageindex++;
            console.log('下一页');
            break;
        case 'd':
        if(state.value.pageindex==totalpage.value)
            {
                alert('已经到最后一页');
                return;
            }
            state.value.pageindex=totalpage.value;
            console.log('尾页');
            break;
    }
    getMember();
}
//页容量
const changsize=()=>{
    state.value.pageindex=1;
    getMember();
}


//显示
const getMember = () => {
    
    axios({
        url: '/api/High/ShowMember',
        method: 'get',
        params: state.value
    })
    .then(res => {
        console.log(res);
        list.value=res.data.data;
        totalcount.value=res.data.totalcount;
        totalpage.value=res.data.totalpage;
    })
    .catch(err => {
        console.log(err);
    })
}

//导出
const daoout=()=>{
    location.href='https://localhost:7272/api/High/DaoExcelChu';
}
//单删
const del=(Id:any)=>{
    var f=confirm('确认要删除吗？');
    if(f==true)
    {
        axios({
        url:'/api/High/DelDanshan',
        method:'delete',
        params:{Id:Id}
    })
    .then(res=>{
        console.log(res.data.data);
        if(res.data.data>0)
        {
            alert('删除成功');
            getMember();
        }
        else
        {
            alert('删除失败');
            return;
        }
    })
    .catch(err=>{
        console.log(err);
    })
    }
    
}
//修改
const upd=(Id:any)=>{
    router.push({
        path:'/UpdMember',
        query:{
            Id:Id
        }
    })
}
//修改积分
const updintergral=(Id:any)=>{
    router.push({
        path:'/InterView',
        query:{
            Id:Id
        }
    })
}
//跳转到详情页
const detail=(Id:any)=>{
    router.push({
        path:'/MemberShowDetail',
        query:{
            Id:Id
        }
    })
}
//跳转到充值页面
const chat=(Id:any)=>{
    router.push({
        path:'/ChatView',
        query:{
            Id:Id
        }
    })
}
</script>

<style lang="scss" scoped>

</style>